<template>
  <div class="pop_box" :class="{'show': css.show}">
    <div class="pi-bg" @click="close()"></div>
    <!-- 获取购买码 无购买码弹框 -->
    <div class="conten_box showUnGroupBox" v-if="showUnGroupBox">
      <span class="close" @click="close()">x</span>
      <h2 class="tit">只有群成员才能获取专属购买码！</h2>
      <h2 class="tit">关注「斗牛APP」微信公众号，</h2>
      <h2 class="tit">聊天框发送「{{serveInfo.info||'牛货'}}」进群。</h2>
      <div class="service flex-center">
        <div class="serviceLeft">
          <img :src="serveInfo.url">
        </div>
        <!-- <div class="serviceRight">
          <p class="head">
            <span class="wName">客服微信号</span>
            <span class="wId">{{serveInfo.number}}</span>
          </p>
          <p class="info">添加好友 通过之后，发送暗号“{{serveInfo.info}}”即可入群！</p>
        </div> -->
      </div>
      <div class="btnBox">
        <p class="copyBtn" @click="copy()"  data-clipboard-text="斗牛APP">复制公众号</p>
        <p class="saveBtn" @click.stop="saveImg()">保存二维码到手机</p>
      </div>
    </div>
    <!-- 输入购买码 做验证 -->
    <div class="conten_box inputProCodeBox" v-else-if="showInputProCodeBox">
      <span class="close" @click="close()">x</span>
      <div class="commitInfo">
        <div class="input_box">
          <input
            type="text"
            maxlength="8"
            :class="{'act': proCode}"
            v-model="proCode"
            placeholder="请输入购买码"
            @input="inputCode"
          >
        </div>
        <div class="info">
          <span>没有购买码？</span>
          <span @click="getCode()">点此获取</span>
        </div>
        <div class="commit_btn_box" :class="{'act': proCode}">
          <p class="commit_btn" @click="commit()">提交</p>
        </div>
      </div>
    </div>
    <!-- 认证成功 -->
    <!-- <div class="attestationSuccessBox" v-else-if="showAttestationSuccessBox">
      <h2 class="headerBox">
        <i class="back" @click="back2()">
          <span></span>
        </i>
        获得购买资格
      </h2>
      <div class="content">
        <div class="pic_box"></div>
        <h2 class="tit">认证成功！</h2>
        <p
          class="info"
        >恭喜您获得【斗牛球鞋券】{{identifysuccess.productname}} {{identifysuccess.size}} 码的购买资格，数量有限先到先得，请在5分钟内完成支付！</p>
        <p class="exp">尺码为随机分配，每个用户每场仅有一次获得机会，此商品为抢购性质，未及时支付等原因导致购买失败，本场将不再获得购买资格</p>
        <div class="pay_btn_box">
          <p class="pay_btn" @click="pay()">
            支付 ￥
            <span>{{identifysuccess.price}}</span>
          </p>
        </div>
      </div>
    </div>-->
    <!-- 支付成功页 -->
    <!-- <div class="attestationSuccessBox paySuccessBox" v-else-if="showPaySuccessBox">
      <h2 class="headerBox">
        <i class="back" @click="back3()">
          <span></span>
        </i>
        支付成功
      </h2>
      <div class="content">
        <div class="pic_box"></div>
        <h2 class="tit">支付成功</h2>
        <p
          class="info"
        >恭喜您获得【斗牛球鞋券】{{identifysuccess.productname}} {{identifysuccess.size}} 码的购买资格，数量有限先到先得，请在5分钟内完成支付！</p>
        <div class="pay_btn_box">
          <p class="pay_btn" @click="goUser()">去“我的资产”看看</p>
        </div>
      </div>
    </div>-->
  </div>
</template>
<script>
import { Checkcode } from "../../../common/api/bull";
import Clipboard from "clipboard";
export default {
  name: "TicketModel",
  components: {},
  data() {
    return {
      showUnGroupBox: false,
      showInputProCodeBox: false,
      showPaySuccessBox: false,
      serveInfo: {}, //客服信息
      proCode: "", //E44998 暂时可用
      css: {
        show: false,
        isCommit: false,
        inptAct: false,
        isAttestation: false
      }
    };
  },
  beforeDestroy() {
    this.$root.Bus.$off("tell_child_showUnGroupBox");
    this.$root.Bus.$off("tell_child_showInputProCodeBox");
    
  },
  mounted() {
    let _ = this;
    window.callbackSaveImg = json => {
      if (!json)  _.toast("保存失败~");
    };
  },
  created() {
    let _this = this;
    _this.$root.Bus.$on("tell_child_showInputProCodeBox", function() {
      _this.proCode=''
      _this.css.show = true;
      _this.showInputProCodeBox = true;
    });
    _this.$root.Bus.$on("tell_child_showUnGroupBox", function(serveInfo) {
      _this.css.show = true;
      _this.showUnGroupBox = true;
      _this.serveInfo = serveInfo;
    });
   
  },
  methods: {
    getCode() {
      this.$emit("get-code");
    },
    // 复制客服微信号到剪切板
    copy() {
      let _this = this;
      var clipboard = new Clipboard(".copyBtn");
      _this.toast("已复制到剪贴板!");
    },
    convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement("CANVAS"),
        ctx = canvas.getContext("2d"),
        img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || "image/png"||"image/jpg"||"image/jpeg");
        callback.call(this, dataURL);
        canvas = null;
      };
      img.src = url;
    },
    // 保存图片到手机
    saveImg() {
      let _ = this,
        base64 = "";
      var img = _.serveInfo.url.replace('https','http'); //imgurl 就是你的图片路径
      let outputFormat = 'image/'+img.split('.')[1]|| "image/png"||"image/jpg"||"image/jpeg"
      //  var url = "static/img/js1.jpg";//这是站内的一张图片资源，采用的相对路径
      _.convertImgToBase64(img, function(base64Img) {
        //转化后的base64
        base64 = base64Img ? base64Img.split(",")[1] : "";
        console.log("生成base64", base64Img);
        if (base64) {
          _.javascriptBridge({
            name: "callAppSaveImageToPhotoAlbum",
            params: {
              callbackname: "callbackSaveImg",
              imagedata: base64
            }
          });
        }
      },outputFormat);
      // console.log("保存图片到手机");
    },
    commit() {
      let _this = this,
        { proCode } = _this;
      // _this.proCode = 'E44998';
      if (!proCode) return;
      Checkcode({ code: proCode })
        .then(res => {
          // alert(JSON.stringify(res))
          console.log("Checkcode res", res);
          document.body.classList.remove("lock");
          if (res && res.status) _this.$emit("pay-ok", proCode);
          else {
            _this.close();
            _this.$emit("call-identify", proCode);
          }
        })
        .catch(e => {
          // alert(JSON.stringify(e))
          console.log("错误", e);
          document.body.classList.remove("lock");
          _this.toast(e && e.msg ? e.msg : "");
          _this.proCode = "";
        });
    },
    close() {
      this.css.show = false;
      this.showInputProCodeBox = false;
      this.showUnGroupBox = false;
      this.proCode = "";
      window.scroll(0,0)
      document.body.classList.remove("lock");
    },
    inputCode(e) {
      let _ = this,
        {
          proCode,
          css: { inptAct, isCommit }
        } = _;
      if (proCode) {
        // _.proCode = proCode.toUpperCase();
        inptAct = true;
        isCommit = true;
      } else {
        inptAct = false;
        isCommit = false;
      }
    }
  }
  // watch: {
  //   //   监听输入框内是否有购买码 改变输入框和提交按钮的样式
  //   proCode(newVal) {
  //     console.log("newVal", newVal);
  //     if (newVal) {
  //       this.proCode = newVal.toUpperCase();
  //       this.css.inptAct = true;
  //       this.css.isCommit = true;
  //     } else {
  //       this.css.inptAct = false;
  //       this.css.isCommit = false;
  //     }
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.pop_box {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  &.show {
    pointer-events: auto;
    .pi-bg {
      background-color: #000;
      opacity: 0.5;
    }
  }
  .pi-bg {
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    transition: all 0.2s ease;
  }
}
.conten_box {
  width: 275px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -137.5px;
  padding: 40px 30px 30px;
  transform: translateY(-50%);
  overflow: hidden;
}

.commitInfo {
  .info {
    text-align: center;
    height: 18px;
    font-size: 12px;
    font-weight: 400;
    color: #232323;
    line-height: 18px;
    margin-bottom: 15px;

    span:last-of-type {
      color: #8246dc;
      text-decoration: underline;
    }
  }
}
.input_box {
  height: 48px;
  background: #f0f0f0;
  border-radius: 2px;
  margin-bottom: 15px;
  input {
    display: block;
    text-align: center;
    background: transparent;
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 12px;
    color: #969696;
    font-weight: 400;
    &.act {
      color: #232323;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 5px;
    }
  }
}
.commit_btn_box {
  height: 40px;
  background: #cdcdcd;
  border-radius: 2px;
  .commit_btn {
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
  }
  &.act {
    background: #232323;
  }
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  color: #646464;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
}
.showUnGroupBox {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  .tit {
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    line-height: 22px;
    text-align: center;
  }
  .service {
    // display: flex;
    padding: 20px 30px 0;
    .serviceLeft {
      width:70%;
      // height: 67px;
      img {
        display: block;
        width: 100%;
        // height: 67px;
      }
    }
    .serviceRight {
      flex: 1;
      padding-left: 8px;
      .head {
        font-size: 12px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        height: 36px;
        flex-wrap: wrap;
        display: flex;
        .wName{
            width: 65px;
            flex-shrink: 0;
            line-height:18px;
        }
        .wId {
          font-size: 14px;
          font-weight: 600;
          color: #8d4fe0;
          line-height:18px;
        }
      }
      .info {
        font-size: 12px;
        font-weight: 400;
        color: #646464;
        line-height: 17px;
      }
    }
  }
}
.btnBox {
  padding: 25px 20px;
  text-align: center;
  .copyBtn {
    height: 40px;
    background: #232323;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    margin-bottom: 15px;
  }
  .saveBtn {
    height: 40px;
    border-radius: 2px;
    border: 1px solid rgba(100, 100, 100, 1);
    background: #fff;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #646464;
    line-height: 40px;
  }
}
</style>

